<template>
  <div class="app-page-scroll">
    <t-card header="基础用法">
      <lg-wangeditor v-model="value" placeholder="请输入"></lg-wangeditor>
    </t-card>
    <t-card header="只读">
      <lg-wangeditor v-model="value" readonly></lg-wangeditor>
    </t-card>
    <t-card header="禁用">
      <lg-wangeditor v-model="value" disabled></lg-wangeditor>
    </t-card>

    <!---------------------------------   api说明文档      -------------------------------------------->
    <t-card header="属性">
      <t-base-table :columns="propColumns" :data="propsData" style="width: 100%" />
      <div>其他属性参考 wangeditor 组件</div>
    </t-card>
    <t-card header="事件">
      <t-base-table :columns="emitColumns" :data="emitData" style="width: 100%" />
      <div>其他属性参考 wangeditor 组件</div>
    </t-card>
    <t-card header="插槽">
      <t-base-table :columns="slotColumns" :data="slotData" style="width: 100%" />
    </t-card>
    <t-card header="api">
      <t-base-table :columns="apiColumns" :data="apiData" style="width: 100%" />
    </t-card>
  </div>
</template>
<script lang="ts" setup>
import './index.less';
import { ref } from 'vue';
import { apiColumns, emitColumns, propColumns, slotColumns } from './index';
import LgWangeditor from '@/soar/components/LgWangeditor/index.vue';

const value = ref();

const propsData = [
  { name: 'modelValue', desc: '内容，支持v-model', type: 'string', def: '' },
  { name: 'placeholder', desc: '占位符', type: 'string', def: '' },
  { name: 'readonly', desc: '只读', type: 'Boolean', def: 'false' },
  { name: 'disabled', desc: '禁用', type: 'Boolean', def: 'false' },
  { name: 'toolbarConfig', desc: '工具栏配置', type: 'Object', def: '' },
  { name: 'editorConfig', desc: '编辑框配置', type: 'Object', def: '' },
];

const emitData = [
  // { name: 'stop', desc: '倒计时结束时触发', param: '' }
];

const apiData = [
  // { name: 'code', desc: '字典code', type: 'string', sample: '' },
];

const slotData = [
  // { name: 'default', desc: '默认，自由渲染', scope: 'd, h, m, s, count, text, hh, mm, ss, stopped' }
];
</script>
